<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>红树林在线监测管理系统</title>
    <link href="css/bootstrap.css" rel="stylesheet">
    <link rel="stylesheet" href="css/layout.css">
    <link rel="stylesheet" href="css/dashboard.css">
    <style>
        .t_title{
            width: 100%;
            height: 100%;
            text-align: center;
            font-size: 2.5em;
            line-height: 80px;
            color: #000;
        }
        #chart_map{
            cursor: pointer;
        }
        .t_show{
            position: absolute;
            top: 0;
            right: 0;
            border-radius: 2px;
            background: #94070A;
            padding: 2px 5px;
            color: #000;
            cursor: pointer;
        }
        .container {
            width: 320px; /* 容器宽度缩小至80% */
            height: 208px; /* 容器高度缩小至80% */
            display: grid;
            grid-template-columns: repeat(4, 1fr); /* 四列布局 */
            grid-gap: 4px; /* 进一步缩小网格间隔 */
            padding: 4px; /* 缩小内边距 */
            box-sizing: border-box; /* 包含边框和内边距在宽高内 */
        }
        .indicator {
            padding: 4px; /* 缩小内边距 */
            background-color: #f4f4f4;
            border: 1px solid #ccc;
            border-radius: 2px; /* 进一步调整圆角大小 */
            text-align: center;
            box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
            display: flex;
            flex-direction: column;
            justify-content: center; /* 垂直居中内容 */
        }
        .indicator h3 {
            margin: 1px 0; /* 减少标题的外边距 */
            font-size: 0.64em; /* 根据缩小比例调整字体大小 */
            color: #333;
        }
        .indicator p {
            font-size: 0.8em; /* 根据缩小比例调整数值字体大小 */
            color: #007BFF;
            margin: 1px 0; /* 减少段落的外边距 */
        }
        .time-display {
            text-align: center;
            font-size: 0.8em; /* 根据缩小比例调整时间显示的字体大小 */
            margin-bottom: 4px; /* 减少底部外边距 */
            width: 100%; /* 使时间显示宽度充满容器 */
        }
    </style>
</head>
<body>

<div class="header">
    <div class="bg_header">
        <div class="header_nav fl t_title" style="font-size: 30px;font-weight: bold;color: white;">
            红树林在线监测管理系统
        </div>
    </div>
</div>

<div class="top_menu">
    <a class="top_menu_font" style=" margin-left: 40px;">其他</a>
    <a class="top_menu_font">登录</a>
    <a class="top_menu_font">注册</a>
    <a class="top_menu_font">退出</a>
</div>


<div class="data_content">
    <div class="data_main">
        <div class="main_left fl">
            <div class="left_1 t_btn6" style="cursor: pointer;">
                <!--左上边框-->
                <div class="t_line_box">
                    <i class="t_l_line"></i>
                    <i class="l_t_line"></i>
                </div>
                <!--右上边框-->
                <div class="t_line_box">
                    <i class="t_r_line"></i>
                    <i class="r_t_line"></i>
                </div>
                <!--左下边框-->
                <div class="t_line_box">
                    <i class="l_b_line"></i>
                    <i class="b_l_line"></i>
                </div>
                    <!--右下边框-->
                    <div class="t_line_box">
                    <i class="r_b_line"></i>
                    <i class="b_r_line"></i>
                </div>
                <div class="main_title" id="title1">
                    <img src="img/t_7.png">
                    <p style="margin-left: 20px ;width: 40px">红树林在线实时监控</p>
                </div>
                <div id="chart_1" class="chart" style="width:100%;height: 260px;"></div>
            </div>
            <div class="left_2" style="cursor: pointer;">
                <!--左上边框-->
                <div class="t_line_box">
                    <i class="t_l_line"></i>
                    <i class="l_t_line"></i>
                </div>
                <!--右上边框-->
                <div class="t_line_box">
                    <i class="t_r_line"></i>
                    <i class="r_t_line"></i>
                </div>
                <!--左下边框-->
                <div class="t_line_box">
                    <i class="l_b_line"></i>
                    <i class="b_l_line"></i>
                </div>
                    <!--右下边框-->
                    <div class="t_line_box">
                    <i class="r_b_line"></i>
                    <i class="b_r_line"></i>
                </div>
                <div class="main_title" title="各检验单位的检验结论统计" id="title2">
                    <img src="img/t_7.png">
                    <p style="margin-left: 40px">实时监控数据</p>
                </div>
                <div id="chart_2" class="chart t_btn9" style="width:100%;height: 260px;"></div>
            </div>
        </div>
        <div class="main_center fl">
            <div class="center_text">
                <!--左上边框-->
                <div class="t_line_box">
                    <i class="t_l_line"></i>
                    <i class="l_t_line"></i>
                </div>
                <!--右上边框-->
                <div class="t_line_box">
                    <i class="t_r_line"></i>
                    <i class="r_t_line"></i>
                </div>
                <!--左下边框-->
                <div class="t_line_box">
                    <i class="l_b_line"></i>
                    <i class="b_l_line"></i>
                </div>
                 <!--右下边框-->
                 <div class="t_line_box">
                    <i class="r_b_line"></i>
                    <i class="b_r_line"></i>
                </div>
                <div class="main_title" id="title0">
                    <img src="img/t_7.png">
                    <p style="margin-left: 68px;">城市红树林数量分布</p>
                </div>
                <div id="chart_map" style="width:100%;height:570px;"></div>
            </div>
        </div>
        <div class="main_right fr">
            <div class="right_1">
                <!--左上边框-->
                <div class="t_line_box">
                    <i class="t_l_line"></i>
                    <i class="l_t_line"></i>
                </div>
                <!--右上边框-->
                <div class="t_line_box">
                    <i class="t_r_line"></i>
                    <i class="r_t_line"></i>
                </div>
                <!--左下边框-->
                <div class="t_line_box">
                    <i class="l_b_line"></i>
                    <i class="b_l_line"></i>
                </div>
                    <!--右下边框-->
                    <div class="t_line_box">
                    <i class="r_b_line"></i>
                    <i class="b_r_line"></i>
                </div>
                <div class="main_title" id="title3">
                    <img src="img/t_7.png">
                    <p style="margin-left: 40px">风玫瑰</p>
                </div>
                <div id="chart_3" class="echart t_btn7" style="width:100%;height: 260px;"></div>
            </div>
            <div class="right_2">
                <!--左上边框-->
                <div class="t_line_box">
                    <i class="t_l_line"></i>
                    <i class="l_t_line"></i>
                </div>
                <!--右上边框-->
                <div class="t_line_box">
                    <i class="t_r_line"></i>
                    <i class="r_t_line"></i>
                </div>
                <!--左下边框-->
                <div class="t_line_box">
                    <i class="l_b_line"></i>
                    <i class="b_l_line"></i>
                </div>
                    <!--右下边框-->
                    <div class="t_line_box">
                    <i class="r_b_line"></i>
                    <i class="b_r_line"></i>
                </div>
                <div class="main_title" id="title4">
                    <img src="img/t_7.png">
                    <p style="margin-left: 40px;">红树林足迹图</p>
                </div>
                <div id="chart_4" class="echart fl t_btn4" style="width:100%;height: 260px;cursor: pointer;"></div>
            </div>
        </div>
    </div>
    <div class="data_bottom">
        <div class="bottom_1 fl" style="cursor: pointer;">
            <!--左上边框-->
            <div class="t_line_box">
                <i class="t_l_line"></i>
                <i class="l_t_line"></i>
            </div>
            <!--右上边框-->
            <div class="t_line_box">
                <i class="t_r_line"></i>
                <i class="r_t_line"></i>
            </div>
            <!--左下边框-->
            <div class="t_line_box">
                <i class="l_b_line"></i>
                <i class="b_l_line"></i>
            </div>
            <!--右下边框-->
            <div class="t_line_box">
                <i class="r_b_line"></i>
                <i class="b_r_line"></i>
            </div>
            <div class="main_title" id="title6">
                <img src="img/t_7.png">
                <p style="margin-left: 68px;">植被物候</p>
            </div>
            <div id="chart_6" class="echart fl t_btn8" style="width:100%;height: 250px;margin-top: 15px;"></div>
        </div>
        <div class="bottom_center fl">
            <div class="bottom_2 fl t_btn5">
                <!--左上边框-->
                <div class="t_line_box">
                    <i class="t_l_line"></i>
                    <i class="l_t_line"></i>
                </div>
                <!--右上边框-->
                <div class="t_line_box">
                    <i class="t_r_line"></i>
                    <i class="r_t_line"></i>
                </div>
                <!--左下边框-->
                <div class="t_line_box">
                    <i class="l_b_line"></i>
                    <i class="b_l_line"></i>
                </div>
                <!--右下边框-->
                <div class="t_line_box">
                    <i class="r_b_line"></i>
                    <i class="b_r_line"></i>
                </div>
                <div class="main_title" id="title5">
                    <img src="img/t_7.png">
                    <p style="margin-left: 68px">物候相机</p>
                </div>
                <div id="chart_5" class="echart fl" style="width:100%;height: 280px;cursor: pointer;"></div>
            </div>
            <div class="bottom_3 fl">
                <!--左上边框-->
                <div class="t_line_box">
                    <i class="t_l_line"></i>
                    <i class="l_t_line"></i>
                </div>
                <!--右上边框-->
                <div class="t_line_box">
                    <i class="t_r_line"></i>
                    <i class="r_t_line"></i>
                </div>
                <!--左下边框-->
                <div class="t_line_box">
                    <i class="l_b_line"></i>
                    <i class="b_l_line"></i>
                </div>
                    <!--右下边框-->
                    <div class="t_line_box">
                    <i class="r_b_line"></i>
                    <i class="b_r_line"></i>
                </div>
                <div class="main_title" id="title7">
                    <img src="img/t_7.png">
                    <p style="margin-left: 38px">红树林扩展模块二</p>
                </div>
                <div id="chart_7" class="echart fl t_btn2" style="width:100%;height: 280px;cursor: pointer;"></div>
            </div>
        </div>
        <div class="bottom_4 fr">
            <!--左上边框-->
            <div class="t_line_box">
                <i class="t_l_line"></i>
                <i class="l_t_line"></i>
            </div>
            <!--右上边框-->
            <div class="t_line_box">
                <i class="t_r_line"></i>
                <i class="r_t_line"></i>
            </div>
            <!--左下边框-->
            <div class="t_line_box">
                <i class="l_b_line"></i>
                <i class="b_l_line"></i>
            </div>
                <!--右下边框-->
                <div class="t_line_box">
                <i class="r_b_line"></i>
                <i class="b_r_line"></i>
            </div>
            <div class="main_title" id="title8">
                <img src="img/t_7.png">
                <p style="margin-left: 5px">红树林扩展模块三</p>
            </div>
            <div id="chart_8" class="echart fl t_btn3" style="width:100%;height: 280px;cursor: pointer;"></div>
        </div>
    </div>
</div>
<div style="text-align:center;">
</div>
</body>
<script src="js/jquery-2.2.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/layout.js"></script>
<script src="js/echarts.min.js"></script>
<script src="js/dataTool.js"></script>
<script src="js/dashboard.js"></script>
<script src="https://cdn.jsdelivr.net/npm/papaparse@5.3.0/papaparse.min.js"></script>
</html>
